<template>
  <div class="performance-detail-container">
    <!-- 顶部大图区域 -->
    <div class="hero-section">
      <div class="hero-background">
        <el-image 
          :src="performance?.artist?.bannerImage || performance?.artist?.avatar || '/default-banner.jpg'" 
          :alt="performance?.title"
          fit="cover"
          class="hero-image"
        />
        <div class="hero-overlay"></div>
      </div>
      
      <!-- 返回按钮 -->
      <div class="back-button" @click="$router.back()">
        <el-icon><ArrowLeft /></el-icon>
      </div>
      
      <!-- 演出基本信息 -->
      <div class="performance-hero-info">
        <div class="performance-title-large">
          <h1>{{ performance?.title || '加载中...' }}</h1>
          <div class="performance-artist">
            <el-image 
              :src="performance?.artist?.avatar || '/default-avatar.png'" 
              :alt="performance?.artist?.name"
              fit="cover"
              class="artist-avatar-small"
            />
            <span class="artist-name">{{ performance?.artist?.name }}</span>
          </div>
        </div>
        <div class="performance-status-tag">
          <el-tag 
            :type="getPerformanceStatusType(performance?.status || 'SCHEDULED')" 
            size="large"
          >
            {{ getPerformanceStatusText(performance?.status || 'SCHEDULED') }}
          </el-tag>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="8" animated />
    </div>

    <!-- 演出详情内容 -->
    <div v-else-if="performance" class="performance-content">
      <!-- 演出基本信息 -->
      <div class="performance-info-section">
        <div class="info-grid">
          <div class="info-item">
            <div class="info-label">演出时间</div>
            <div class="info-value">
              {{ formatPerformanceDateTime(performance.startTime) }}
            </div>
          </div>
          <div class="info-item">
            <div class="info-label">演出场地</div>
            <div class="info-value">{{ performance.venue }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">楼层</div>
            <div class="info-value">{{ performance.floor || '未指定' }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">容量</div>
            <div class="info-value">
              {{ performance.currentAttendance || 0 }}/{{ performance.maxCapacity || '不限' }}
            </div>
          </div>
        </div>
      </div>

      <!-- 演出描述 -->
      <div v-if="performance.description" class="description-section">
        <h3 class="section-title">演出介绍</h3>
        <p class="performance-description">{{ performance.description }}</p>
      </div>

      <!-- 艺人信息 -->
      <div v-if="performance.artist" class="artist-section">
        <div class="section-header">
          <h3 class="section-title">演出艺人</h3>
          <el-button text @click="viewArtistDetail(performance.artist.id)">
            查看艺人详情
          </el-button>
        </div>
        
        <div class="artist-card">
          <div class="artist-avatar">
            <el-image 
              :src="performance.artist.avatar || '/default-avatar.png'" 
              :alt="performance.artist.name"
              fit="cover"
              class="avatar-medium"
            />
          </div>
          <div class="artist-info">
            <h4 class="artist-name">{{ performance.artist.name }}</h4>
            <div class="artist-genre">
              <el-tag :type="getMusicTypeColor(performance.artist.genre || '')" size="small">
                {{ getMusicTypeLabel(performance.artist.genre || '') }}
              </el-tag>
            </div>
            <p class="artist-description">{{ performance.artist.description || '暂无介绍' }}</p>
          </div>
        </div>
      </div>

      <!-- 艺人代表作品 -->
      <div v-if="performance.artist?.works && performance.artist.works.length > 0" class="works-section">
        <div class="section-header">
          <h3 class="section-title">艺人代表作品</h3>
        </div>
        
        <div class="works-grid">
          <div 
            v-for="work in performance.artist.works" 
            :key="work.id"
            class="work-card"
            @click="viewWork(work.id)"
          >
            <div class="work-cover">
              <el-image 
                :src="work.coverUrl || '/default-work-cover.jpg'" 
                :alt="work.title"
                fit="cover"
                class="work-image"
              />
              <div class="work-overlay">
                <el-icon><VideoPlay /></el-icon>
              </div>
            </div>
            <div class="work-info">
              <h4 class="work-title">{{ work.title }}</h4>
              <p class="work-duration" v-if="work.duration">{{ work.duration }}</p>
              <p class="work-description" v-if="work.description">{{ work.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 错误状态 -->
    <div v-else class="error-container">
      <el-result
        icon="error"
        title="加载失败"
        sub-title="无法加载演出信息，请稍后重试"
      >
        <template #extra>
          <el-button type="primary" @click="loadPerformanceDetail">
            重新加载
          </el-button>
        </template>
      </el-result>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft, VideoPlay } from '@element-plus/icons-vue'
import { getPerformanceDetail } from '@/api/performance'
import type { Performance } from '@/types'

// 路由和状态
const route = useRoute()
const router = useRouter()

// 响应式数据
const loading = ref(true)
const performance = ref<Performance | null>(null)

// 获取演出详情
const loadPerformanceDetail = async () => {
  try {
    loading.value = true
    const performanceId = route.params.id as string
    const response = await getPerformanceDetail(performanceId)
    
    performance.value = response.data
  } catch (error) {
    console.error('加载演出详情失败:', error)
    ElMessage.error('加载演出详情失败')
  } finally {
    loading.value = false
  }
}

// 查看艺人详情
const viewArtistDetail = (artistId: number) => {
  router.push(`/artists/${artistId}`)
}

// 查看作品详情
const viewWork = (workId: number) => {
  ElMessage.info('查看作品详情功能开发中...')
}

// 工具函数
const getPerformanceStatusType = (status: string) => {
  const statusMap: Record<string, string> = {
    'SCHEDULED': 'primary',
    'ONGOING': 'success',
    'COMPLETED': 'info',
    'CANCELLED': 'danger'
  }
  return statusMap[status] || 'primary'
}

const getPerformanceStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    'SCHEDULED': '即将开始',
    'ONGOING': '进行中',
    'COMPLETED': '已结束',
    'CANCELLED': '已取消'
  }
  return statusMap[status] || '未知状态'
}

const formatPerformanceDateTime = (dateTime: string) => {
  const date = new Date(dateTime)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  
  return `${year}-${month}-${day} ${hours}:${minutes}`
}

// 生命周期
onMounted(() => {
  loadPerformanceDetail()
})
</script>

<style scoped>
.performance-detail-container {
  min-height: 100vh;
  background: #f5f5f5;
}

.hero-section {
  position: relative;
  height: 400px;
  overflow: hidden;
}

.hero-background {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%);
}

.back-button {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
}

.back-button:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

.performance-hero-info {
  position: absolute;
  bottom: 40px;
  left: 40px;
  right: 40px;
  color: white;
  z-index: 5;
}

.performance-title-large h1 {
  font-size: 2.5rem;
  font-weight: bold;
  margin: 0 0 20px 0;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.performance-artist {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.artist-avatar-small {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.artist-name {
  font-size: 1.2rem;
  font-weight: 500;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.performance-status-tag {
  display: inline-block;
}

.performance-content {
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.performance-info-section {
  background: white;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.info-item {
  text-align: center;
}

.info-label {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 8px;
}

.info-value {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
}

.description-section {
  background: white;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 20px 0;
  color: #333;
}

.performance-description {
  font-size: 1rem;
  line-height: 1.6;
  color: #666;
  margin: 0;
}

.artist-section {
  background: white;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.artist-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.artist-avatar {
  flex-shrink: 0;
}

.avatar-medium {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #f0f0f0;
}

.artist-info {
  flex: 1;
}

.artist-info .artist-name {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 10px 0;
  color: #333;
}

.artist-genre {
  margin-bottom: 15px;
}

.artist-info .artist-description {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #666;
  margin: 0;
}

.works-section {
  background: white;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.work-card {
  background: #f8f9fa;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.work-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.work-cover {
  position: relative;
  height: 120px;
  overflow: hidden;
}

.work-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.work-card:hover .work-overlay {
  opacity: 1;
}

.work-overlay .el-icon {
  color: white;
  font-size: 2rem;
}

.work-info {
  padding: 15px;
}

.work-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-duration {
  font-size: 0.85rem;
  color: #666;
  margin: 0 0 5px 0;
}

.work-description {
  font-size: 0.8rem;
  color: #999;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.loading-container {
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.error-container {
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .hero-section {
    height: 300px;
  }
  
  .performance-title-large h1 {
    font-size: 2rem;
  }
  
  .performance-hero-info {
    bottom: 20px;
    left: 20px;
    right: 20px;
  }
  
  .performance-content {
    padding: 20px 15px;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .artist-card {
    flex-direction: column;
    text-align: center;
  }
  
  .works-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
  }
}
</style>
